<!-- 绑定邮箱 -->
<template>
  <HeaderBar
    :currentName="_t18('sidebar_certified')"
    :border_bottom="true"
    :isCenter="true"
  />

  <div class="content-box">
    <div class="bind-not" v-if="!bind">
      <div class="item">
        <div class="text">{{ _t18('login_emailCode') }}</div>
        <div class="input">
          <input type="text" v-model="formData.email" :placeholder="_t18('recharge_input')" />
        </div>
      </div>
      <div class="item">
        <div class="text">{{ _t18('verification_code') }}</div>

        <div class="input">
          <input type="text" v-model="formData.code" :placeholder="_t18('recharge_input')" />
          <div class="code-box">
            <div class="wait-code" v-if="flag">
              <van-count-down :time="time" format="ss" @finish="finish" />
            </div>
            <div class="send-code" v-else @click="send">{{ _t18('login_send') }}</div>
          </div>
        </div>
      </div>
      <div class="btnBox" @click="submit">
        <ButtonBar :btnValue="_t18('btnConfirm', ['bitmake'])" />
      </div>
    </div>
    <div class="bind-yes" v-else>
      <div class="top">
        <img src="@/assets/defi/email.png" alt="" />
        <div class="text">{{ _t18('email_bind_success') }}</div>
        <div class="email">{{ _t18('email_your') }}：{{ email }}</div>
      </div>

      <div class="change-email" @click="bind = false">{{ _t18('email_update') }}</div>
      <div class="back" @click="$router.push('/')">{{ _t18('backhome') }}</div>
    </div>
  </div>
</template>

<script setup>
import HeaderBar from '@/components/HeaderBar/index.vue'
import ButtonBar from '@/components/common/ButtonBar/index.vue'
import { emailCode, emailBind } from '@/api/user'
import { useUserStore } from '@/store/user/index'
import { storeToRefs } from 'pinia'
import { showToast } from 'vant'
import { _t18 } from '@/utils/public'
import { useToast } from '@/hook/useToast'

const { _toast } = useToast()
const userStore = useUserStore()
userStore.getUserInfo()
// 用户信息
const { userInfo } = storeToRefs(userStore)
const email = ref(userInfo.value.user?.email)
const bind = ref(email.value)

//表单信息
const formData = ref({
  email: '',
  code: ''
})

/**
 * 倒计时
 */
const time = ref(0)
const flag = ref(false)
const send = () => {
  if (formData.value.email == '') {
    _toast('login_please_emailCode')
    return
  }
  emailCode('BIND', formData.value.email).then((res) => {
    if (res.code == '200') {
      flag.value = true
      time.value = 60 * 1000
    } else {
      showToast(res.msg)
    }
  })
}
const finish = () => {
  flag.value = false
}
const submit = () => {
  if (formData.value.email == '') {
    _toast('login_please_emailCode')
    return
  }
  if (formData.value.code == '') {
    _toast('verification_code')
    return
  }
  emailBind(formData.value.email, formData.value.code).then((res) => {
    if (res.code == '200') {
      _toast('email_bind_success')
      email.value = formData.value.email
      bind.value = true
    } else {
      showToast(res.msg)
    }
  })
}
</script>

<style lang="scss" scoped>
* {
  font-size: 16px;
  color: var(--ex-default-font-color);
}

.content-box {
  width: 100%;
  background: #f7f8fa;
  min-height: 100vh;
  padding: 20px 16px;
}

.send-code {
  font-size: 14px;
  color: #fff;
}

/* ===================== 未绑定状态 ===================== */
.bind-not {
  .item {
    margin-bottom: 20px;

    .text {
      margin: 12px 0 8px;
      font-size: 14px;
      color: #555;
    }

    .input {
      width: 100%;
      height: 48px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease;

      &:focus-within {
        border-color: #333;
      }

      input {
        flex: 1;
        height: 100%;
        background: none;
        border: none;
        font-size: 15px;
        outline: none;
      }

      .code-box {
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        padding: 0 14px;
        background: #00c693;
        border-radius: 16px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: opacity 0.2s ease;

        &:active {
          opacity: 0.8;
        }

        .wait-code {
          border-radius: 16px;
          padding: 0 10px;
          color: #fff;
        }
      }
    }
  }

  .btnBox {
    margin-top: 40px;
    text-align: center;

    :deep(button) {
      width: 100%;
      height: 50px;
      border-radius: 80px; /* ✅ 改为半圆角 */
      font-size: 16px;
      font-weight: 600;
      background: #000; /* 原样保持 */
      color: #fff;
    }
  }
}

/* ===================== 已绑定状态 ===================== */
.bind-yes {
  padding: 0 15px;
  text-align: center;

  .top {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 132px;
      height: 100px;
    }

    .text {
      color: #111111;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      margin: 24px 0 16px 0;
    }

    .email {
      font-size: 15px;
      color: #555;
    }
  }

  .change-email {
    margin: 60px auto 20px;
    width: 80%;
    height: 48px;
    line-height: 48px;
    background: #111111;
    color: #fff;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
  }

  .back {
    width: 80%;
    height: 48px;
    line-height: 48px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 24px;
    color: #555;
    font-size: 15px;
  }
}

/* ✅ 导航栏标题真正居中 */
:deep(.van-sticky header) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--ex-border-color);
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

/* ✅ 左侧返回按钮 */
:deep(.van-sticky header .left) {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* ✅ 去掉右侧客服 */
:deep(.van-sticky header .right) {
  display: none !important;
}

/* ✅ 标题始终居中 */
:deep(.centerStyle) {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: center;
  pointer-events: none;
}
</style>
